<template>
    <div class="daren-tooltip">
        <el-tooltip
            effect="light"
            placement="top"
            popper-class="popper-daren-tips"
            :disabled="props?.content?.length <= 2">
            <template #content>
                <el-scrollbar max-height="145px">
                    <div class="popover">
                        <div class="msg">
                            {{ getContent(props.content) }}
                        </div>
                    </div>
                </el-scrollbar>
            </template>
            <div class="view-list">
                <div class="item-name-custom">{{ getContent(viewList) }}</div>
            </div>
        </el-tooltip>
    </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue';

type contentType = {
    id: string;
    [propName: string]: string;
};
interface Props {
    content: contentType[];
}
const props = withDefaults(defineProps<Props>(), {
    content: () => []
});
const viewList = computed(() => {
    const list = props?.content?.slice(0, 2);
    return list || [];
});
const getContent = (list: any) => {
    const newList = list.map((item: any) => item.daren_name);
    return newList.join('、');
};
</script>
<style scoped lang="scss">
.popper-daren-tips {
    .popover {
        background-color: #fff;
        box-shadow: 0 0 40px #ddd;
        max-height: 320px;

        .msg {
            font-size: 12px;
            color: #666;
            line-height: 1.5;
        }
    }
}

.daren-tooltip {
    .view-list {
        display: inline-block;
    }

    .item-name-custom {
        display: inline-block;
    }
}
</style>
